@extends('layouts.appManager')

@section('title')服务端授权管理 - @endsection

@section('style')
    <style>
        .time {
            font-size: 13px;
            color: #999;
        }

        .bottom {
            margin-top: 13px;
            line-height: 12px;
        }

        .button {
            padding: 0;
            float: right;
        }

        .image {
            width: 100%;
            display: block;
        }

        .clearfix:before,
        .clearfix:after {
            display: table;
            content: "";
        }

        .clearfix:after {
            clear: both
        }
    </style>

@endsection

@section('content')
    <div class="container py-5">
        <h3>特色服务端</h3>
        <br>
        <div>
            <a href="/manager/serverAuth"> 我的授权 </a>
        </div>
        <div class="text-right">
            <el-radio-group v-model="my" size="small" @input="getList">
                <el-radio-button :label="0">全部</el-radio-button>
                <el-radio-button :label="1">我发布的</el-radio-button>
            </el-radio-group>
        </div>
        <el-row :gutter="10">
            <el-col v-for="(o, index) in list" :key="o"  :xs="24" :sm="12" :md="8" :lg="8" class="mb-2">
                <el-card :body-style="{ padding: '5px' }">
                    <div style="padding: 14px;">
                        <h4>@{{o.name}}</h4>
                        <div>
                            <time class="time">code：@{{o.code}}</time>
                        </div>
                        <div class="clearfix">

                            <div class="mt-2">
                                <time class="time" v-html="o.info"></time>
                            </div>
                            <div class="mt-4">
                                <time class="time">价格：@{{o.price/10}}元 / 月</time>
                            </div>
                            <div class="">
                                <time class="time">联系qq：@{{o.qq}}</time>
                            </div>


                            <div v-if="my">
                                <el-button type="text" class="button" @click="getAuthList(o)">授权列表</el-button>
                            </div>

                        </div>
                    </div>
                </el-card>
            </el-col>
        </el-row>

    </div>

    <el-dialog
        title="授权列表"
        v-if="curItem"
        :visible.sync="dialogVisible"
        width="80%">
        <div>
            <el-table
                :data="list_auth"
                style="width: 100%">
                <el-table-column
                    label="被授权人">
                    <template slot-scope="scope">
                        @{{ scope.row.user.name }}
                    </template>
                </el-table-column>
                <el-table-column
                    prop="guid"
                    label="序列号"
                    width="320">
                </el-table-column>
                <el-table-column
                    prop="endTime"
                    label="到期时间"
                    width="240">
                    <template slot-scope="scope">
                        <el-date-picker @change="updateEndTime(scope.row)"
                            v-model="scope.row.endTime"
                            type="datetime"
                            value-format="yyyy-MM-dd HH:mm:ss"
                            placeholder="选择日期时间">
                        </el-date-picker>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="created_at"
                    label="添加时间"
                    width="180">
                </el-table-column>
            </el-table>
        </div>
        <span slot="footer" class="dialog-footer">

        </span>
    </el-dialog>

@endsection

@section('script')
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                my:0,
                list:[],
                list_auth:[],
                curItem: null,
                newItem: {
                    id:0,
                    guid:'',
                    info:'',
                    name:'',
                },
                dialogVisible:false,
            },
            mounted() {
                this.getList();
            },
            filters:{

            },
            methods:{
                updateEndTime(item){
                    let t=this;
                    post('serverEngine/updateEndTime',{id:item.id,endTime:item.endTime},res=>{
                        console.log(res);
                    },t)
                },
                getList(){
                    let t=this;
                    post('serverEngine/list',{my:t.my},res=>{
                        console.log(res);
                        t.list=res.list;
                    },t)
                },
                getAuthList(item){
                    let t=this;
                    t.curItem=item;
                    post('serverEngine/getAuthList',{id:item.id},res=>{
                        console.log(res);
                        t.list_auth=res.list;
                        t.dialogVisible=true;
                    },t)
                },
                add(){
                    let t=this;
                    if (t.list.length>=100){
                        t.$message({
                            type: 'info',
                            message: '最多添加100个授权'
                        });
                        return;
                    }
                    if (t.curItem.guid===''){
                        t.$message({
                            type: 'info',
                            message: '请输入服务器序列号'
                        });
                        return;
                    }
                    post('serverEngine/add',t.curItem,res=>{
                        t.getList();
                        t.dialogVisible=false;
                        this.$message({
                            type: 'success',
                            message: '添加成功'
                        });
                    },t)
                },
                del(id){
                    let t=this;
                    post('serverEngine/del',{id:id},res=>{
                        if (res==='1'){
                            t.getList();
                            this.$message({
                                type: 'success',
                                message: '删除成功'
                            });
                        }else{
                            this.$message({
                                type: 'error',
                                message: '删除失败'
                            });
                        }
                    },t)
                }
            }
        });
    </script>
@endsection
